<template>
  <div class="Thenewaddress">
    <div class="table">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>地址列表</span>
        </div>
        <div>
          <el-button
            ref="fromData"
            @click="addMethod('fromData')"
            size="mini"
            type="primary"
            >新增
          </el-button>
        </div>
      </div>
      <!-- 地址列表 -->
      <div class="tables">
        <el-table
          border
          :data="tableList"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
          <el-table-column prop="userName" label="收货人" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>

          <el-table-column prop="isDefault" label="默认地址" width="95">
            <template slot-scope="scope">
              <template v-if="scope.row.isDefault == 'yes'">是</template>
              <template v-if="scope.row.isDefault == 'no'">否</template>
            </template>
          </el-table-column>
          <el-table-column prop="userAddress" label="收件人地址" width="230">
          </el-table-column>
          <el-table-column prop="addressDetailed" label="详细地址">
          </el-table-column>
          <el-table-column prop="addressTable" label="标签 " width="95">
          </el-table-column>
          <el-table-column prop="name" label="操作 " width="200">
            <template slot-scope="scope">
              <el-button
                style="background-color: #6090ec; color: #fff"
                size="mini"
                @click="editMethod(scope.row)"
                >修改
              </el-button>
              <el-button
                @click="delMethod(scope.row)"
                style="background-color: #ff0000; color: #fff"
                size="mini"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增地址 -->
    <el-dialog
      title="邮寄地址"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      width="40%"
      center
    >
      <el-form
        :inline="true"
        :model="fromData"
        :rules="fromDatarules"
        ref="fromData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="收货人" prop="userName">
          <el-input size="mini" v-model="fromData.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="mini" v-model="fromData.phone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址">
          <el-input
            size="mini"
            style="width: 170px; margin-right: 10px"
            v-model="fromData.userAddress"
          ></el-input>
          <el-button type="primary" size="mini" @click="openshqDialogVisible"
            >选择</el-button
          >
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input size="mini" v-model="fromData.addressDetailed"></el-input>
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-radio v-model="fromData.isDefault" label="yes">是</el-radio>
          <el-radio v-model="fromData.isDefault" label="no">否</el-radio>
        </el-form-item>
        <el-form-item label="标签" prop="addressTable">
          <el-radio v-model="fromData.addressTable" label="家">家</el-radio>
          <el-radio v-model="fromData.addressTable" label="公司">公司</el-radio>
          <el-radio v-model="fromData.addressTable" label="学校">学校</el-radio>
          <el-radio v-model="fromData.addressTable" label="其他">其他</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitForm('fromData')" size="mini" type="primary"
          >确定</el-button
        >
        <el-button @click="addDialogVisible = false" size="mini" type="primary"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getdelUserAddress">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="省市区选择"
      :visible.sync="shqDialogVisible"
      width="30%"
      center
    >
      <span>省市区选择</span>
      <el-select
        style="width: 120px"
        clearable
        size="mini"
        v-model="fromData.sheng"
        placeholder="选择省"
        @change="shengChange"
      >
        <el-option
          v-for="item in shengList"
          :key="item.id"
          :label="item.addressName"
          :value="item.id + '-' + item.addressName"
        >
        </el-option>
      </el-select>
      <el-select
        style="width: 120px"
        clearable
        size="mini"
        v-model="fromData.shi"
        placeholder="选择市"
        @change="shiChange"
      >
        <el-option
          v-for="item in shiList"
          :key="item.id"
          :label="item.addressName"
          :value="item.id + '-' + item.addressName"
        >
        </el-option>
      </el-select>
      <el-select
        style="width: 120px"
        clearable
        size="mini"
        v-model="fromData.qu"
        placeholder="选择区/县"
      >
        <el-option
          v-for="item in quList"
          :key="item.id"
          :label="item.addressName"
          :value="item.id + '-' + item.addressName"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shqDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureshqval">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Thenewaddress",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      // 用户id
      userId: "",
      // 地址列表
      tableList: [],
      // 新增修改数据
      fromData: {
        adrssId: "",
        phone: "",
        userName: "",
        userAddress: "",
        addressDetailed: "",
        isDefault: "",
        addressTable: "",
        sheng: "",
        shi: "",
        qu: "",
        pid: null,
      },
      // 省市区数组
      shengList: [],
      shiList: [],
      quList: [],
      //校验
      fromDatarules: {
        phone: [{ required: true, message: "请输入", trigger: "blur" }],
        userName: [{ required: true, message: "请输入", trigger: "blur" }],
        userAddress: [{ required: true, message: "请输入", trigger: "blur" }],
        addressDetailed: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        isDefault: [{ required: true, message: "请输入", trigger: "change" }],

        addressTable: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
      // 新增弹窗显示
      addDialogVisible: false,
      // 删除弹窗
      delDialogVisible: false,
      // 省市区
      shqDialogVisible: false,
    };
  },
  methods: {
    // 列表
    getbackSelectAddresses() {
      this.$axios
        .getqueryUserAddressList({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.tableList = res.data;
          }
        });
    },
    // 新增地址
    getbackInsertAddresses() {
      this.$axios
        .getaddUserAddress({
          userId: this.userId,
          phone: this.fromData.phone,
          userName: this.fromData.userName,
          userAddress: this.fromData.userAddress,
          addressDetailed: this.fromData.addressDetailed,
          isDefault: this.fromData.isDefault,
          addressTable: this.fromData.addressTable,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getbackSelectAddresses();
          }
        });
    },
    // 修改地址
    getupdUserAddress() {
      this.$axios
        .getupdUserAddress({
          id: this.fromData.adrssId,
          phone: this.fromData.phone,
          userName: this.fromData.userName,
          userAddress: this.fromData.userAddress,
          addressDetailed: this.fromData.addressDetailed,
          isDefault: this.fromData.isDefault,
          addressTable: this.fromData.addressTable,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getbackSelectAddresses();
          }
        });
    },

    // 删除接口
    getdelUserAddress() {
      this.$axios
        .getdelUserAddress({
          id: this.fromData.adrssId,
        })
        .then((res) => {
          console.log(res);
          this.fromData.adrssId = "";
          if (res.code == "00000") {
            this.delDialogVisible = !this.delDialogVisible;
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getbackSelectAddresses();
          }
        });
    },

    // 新增按钮
    addMethod(formName) {
      this.addDialogVisible = !this.addDialogVisible;
      this.fromData = {};
      this.fromData.adrssId = "";
    },
    // 修改按钮
    editMethod(row) {
      this.fromData.adrssId = row.id;
      this.$axios
        .queryUserAddressInfo({
          id: this.fromData.adrssId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.fromData = res.data;
            this.fromData.adrssId = res.data.id;
          }
        });
    },
    // 删除点击事件
    delMethod(row) {
      this.fromData.adrssId = row.id;
      this.delDialogVisible = !this.delDialogVisible;
    },
    // 确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fromData.adrssId == "") {
            this.getbackInsertAddresses();
          } else {
            this.getupdUserAddress();
          }
          // this.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 查询省市区接口
    shengChange(val) {
      console.log(val);
      this.fromData.pid = val.split("-")[0];
      this.getSysAddressList(1);
    },
    shiChange(val) {
      this.fromData.pid = val.split("-")[0];
      console.log(val);

      this.getSysAddressList(2);
    },
    getSysAddressList(row) {
      this.$axios
        .getSysAddressList({
          pid: this.fromData.pid,
        })
        .then((res) => {
          if (this.fromData.pid == null) {
            this.shengList = res.data;
          } else {
            if (row == 1) {
              this.shiList = res.data;
            } else {
              this.quList = res.data;
            }
          }
        });
    },
    sureshqval() {
      let sheng = "";
      let shi = "";
      let qu = "";
      if (this.fromData.sheng) {
        sheng = this.fromData.sheng.split("-")[1];
      }
      if (this.fromData.shi) {
        shi = this.fromData.shi.split("-")[1];
      }
      if (this.fromData.qu) {
        qu = this.fromData.qu.split("-")[1];
      }
      console.log(this.fromData.sheng);
      if (sheng&&shi) {
           this.fromData.userAddress = sheng + "/" + shi + "/" + qu;
      this.shqDialogVisible = false;
      }else{
        this.$message({
              message: "请选择省市",
              type: "warning",
            });
      }
     
    },
    openshqDialogVisible() {
      this.fromData.sheng = "";
      this.fromData.shi = "";
      this.fromData.qu = "";
      this.shqDialogVisible = true;
    },
  },
  mounted() {
    this.userId = this.$route.params.customerId;
    this.getbackSelectAddresses();
    // 省市区地址
    this.getSysAddressList();
  },
};
</script>
<style scoped>
.Thenewaddress {
  height: 100vh;
  background-color: #f7f7f7;
}

.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.tuo-1 {
  display: flex;
}

.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}

.table {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0.1px;
}

.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}

.tables {
  margin-top: 10px;
  display: flex;
  /* justify-content:space-between; */
}

.tables-1 {
  margin-right: 10px;
  width: 40%;
}

.tables-2 {
  width: 60%;
}

/* .add {
  width: 642px;
  height: 326px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
} */
.pop-9 {
  font-size: 11px;
  width: 60px;
  padding-top: 5px;
}

.pop-8 {
  font-size: 11px;
  width: 60px;
  padding-top: 10px;
}

.pop {
  margin-left: 20px;
}

.pop-1 {
  display: flex;
  width: 250px;
}

.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}

.pop-2 {
  display: flex;
}

.pop-3 {
  margin-left: 10px;
  margin-top: 20px;
}

.too-1-1 {
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
  font-size: 20px;
}

.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}

.lan {
  margin-top: 5px;
  color: #2f80ed;
  font-size: 11px;
}
</style>